<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>呆萌抓娃娃</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 0;
        }
        #box{
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        header{
            width: 100vw;
            height:20vh;
            background-color: #ffd5c0;
        }

        footer{
            width: 100vw;
            height: 80vh;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .wrapper{
            width: 94vw;
            height: 18vh;
            margin: 1vh auto;
            border-radius: 10px;
            overflow: hidden;
        }

        .fix{
            width:100%;
            height: 8vh;
            background-color: rgba(0,0,0,0.8);
            letter-spacing: 1px;
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .context{
            letter-spacing: 1px;
        }
        .btn{
            background: url("images/q111_07.png") 100% 100% no-repeat;
            background-size: 100% 100%;
            width: 90px;
            height: 25px;
            line-height: 25px;
        }

        #modal{
            position: fixed;
            top: 45vh;
            left: 20vw;
            width: 60vw;
            height: 18vh;
            border: 1px solid deeppink;
            background-color: white;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        p{
            font-size: 16px;
            color: white;
            text-align: center;
        }
        button{
            font-size: 16px;
            color: white;
            width: 90px;
            height: 30px;
            line-height: 30px;
            background: url("images/q111_03.png") 100% 100% no-repeat;
            background-size: 100% 100%;
            outline: none;
            border: none;
        }
    </style>
</head>
<body>
<div id="box">

    <header>
        <div class="wrapper">
            <img src="http://media.starcandy.cn/doll/banner-30.png" alt="">
        </div>
    </header>

    <footer>
        <img src="images/q111.jpg" alt="">
    </footer>

    <div class="fix">
        <p class="context">更多娃娃请下载App免费体验</p>
        <p class="btn">下载App</p>
    </div>

    <div id="modal-wrapper" style="display: none;">
        <div id="modal">
            <p style="color: #666666;">免费注册</p>
            <p style="color: #d66f81;font-size: 18px;">领取百元大奖</p>
            <button>立即下载</button>
        </div>
    </div>

</div>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
    $(function () {
        var timer = null, isFirst = true, modalWrapper = $('#modal-wrapper');

        $('.btn').click(function (e) {
            var e = e || window.event;
            e.stopPropagation();
            modalWrapper.show();
            isFirst = false;
        });

        $('button').click(function (e) {
            var e = e || window.event;
            e.stopPropagation();
            modalWrapper.hide();
            d();
        });


        timer = setTimeout(function () {
            if(!isFirst && modalWrapper.css('display')==='none'){
                clearTimeout(timer);
                return;
            }else{
                modalWrapper.show();
                $('body').click(function () {
                    modalWrapper.hide();
                    d();
                });
                isFirst = true;
            }
        },5000);
    });

    function d() {
        if(operator()==='iphone'){
            window.location.href = 'https://itunes.apple.com/cn/app/%E5%91%86%E8%90%8C%E6%8A%93%E5%A8%83%E5%A8%83/id1336379623?mt=8';
        }else{
            var i = document.createElement('iframe');
            i.style.display = 'none';
            i.setAttribute('src','http://file.yanyuan01.cn/apk/106.apk');
            $('body').append(i);
        }
    }

    /**
     * 判断终端
     * @returns {*}
     */
    function operator() {
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        if (isiOS) return 'iphone';
        if (isAndroid) return 'android';
    };
</script>
</body>
</html>